<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { informationdisclosureById as MainById } from '@T2/service/api.ts';
import { deepCopy } from '@T2/utils/utils.ts';
import dayjs from 'dayjs';

const { row } = defineProps({
  row: {
    type: [Object, null],
    required: true,
  },
});
const emits = defineEmits(['closed']);
const showRf = ref(true);

const nowTime = dayjs();
onMounted(() => {
  const { id, is_date_active, show_date } = deepCopy(row);
  Rt.form = {
    id,
    is_date_active,
    show_date: show_date || dayjs().format('YYYY-MM-DD HH:mm:ss'),
  };
});

const Rt = reactive({
  form: {},
});
const FormRef = ref(null);
const disabledDate = (time) => {
  return dayjs(time).isBefore(nowTime, 'day');
}
const disabledHours = () => {
  if (!Rt.form.show_date) {
    return [];
  };
  const selectedDay = dayjs(Rt.form.show_date);
  if (selectedDay.isSame(nowTime, 'day')) {
    return Array.from({ length: nowTime.hour() }, (_, i) => i); // 禁用当前小时之前
  }
  return [];
}
const disabledMinutes = (hour) => {
  if (!Rt.form.show_date) {
    return [];
  }
  const selectedDay = dayjs(Rt.form.show_date);
  if (selectedDay.isSame(nowTime, 'day') && hour === nowTime.hour()) {
    return Array.from({ length: nowTime.minute() }, (_, i) => i); // 禁用当前分钟之前
  }
  return [];
}
const disabledSeconds = (hour, minute) => {
  if (!Rt.form.show_date) {
    return [];
  }
  const selectedDay = dayjs(Rt.form.show_date);
  if (
    selectedDay.isSame(nowTime, 'day') &&
    hour === nowTime.hour() &&
    minute === nowTime.minute()
  ) {
    return Array.from({ length: nowTime.second() }, (_, i) => i); // 禁用当前秒之前
  }
  return [];
}
const isDateActiveChange = (value) => {
  if (value && !Rt.form.show_date) {
    Rt.form.show_date = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }
}

const handleSubmit = async () => {
  if (!Rt.form.is_date_active) {
    Rt.form.show_date = null;
  }
  EditMain();
}
const EditMain = () => {
  MainById({
    method: 'patch',
    id: Rt.form.id,
    data: {
      ...Rt.form,
    }
  }).then(res => {
    ElMessage.success('编辑成功');
    handleCancel(true);
  }).catch(res => {
    ElMessage.error('编辑失败');
    handleCancel(true);
  });
}

const handleCancel = (refresh = false) => {
  emits('closed', refresh);
}
</script>

<template>
  <div>
    <el-dialog v-model="showRf" title="恢复展示" width="400px" @closed="handleCancel()">
      <el-form
        ref="FormRef"
        :model="Rt.form"
        label-width="120px"
      >
        <el-form-item prop="is_date_active" label="展示期限：">
          <el-radio-group v-model="Rt.form.is_date_active" @change="isDateActiveChange">
            <el-radio label="关闭" :value="false"></el-radio>
            <el-radio label="开启" :value="true"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="show_date" label="展示截止时间：" v-if="Rt.form.is_date_active">
          <el-date-picker
            v-model="Rt.form.show_date"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择截止时间"
            :disabled-date="disabledDate"
            :disabled-hours="disabledHours"
            :disabled-minutes="disabledMinutes"
            :disabled-seconds="disabledSeconds"
            :clearable="false"
            :teleported="false"
          />
        </el-form-item>
      </el-form>
    
      <template #footer>
        <div style="flex: auto">
          <el-button @click="showRf = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>